<%--
  Created by IntelliJ IDEA.
  User: yongt
  Date: 2019/3/3
  Time: 17:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>职位列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="CONTENT-TYPE" content="text/html;charest=utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <%--紧记：记住每一个页面都需要引入jquery库--%>
    <script type="text/javascript" src="../js/jquery.min.js"></script>


</head>
<body>

<div class="container">

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11">
            <%--tr代表一行 为for循环的一个单位--%>
            <table class="table">
                <thead>
                <tr>
                    <th>员工ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>家庭住址</th>
                    <th>教育程度</th>
                    <th>生日</th>
                    <th>部门</th>
                    <th>职位</th>
                </tr>
                </thead>

                <tbody>


                <c:forEach items="${empList}" var="emp">
                    <tr>
                        <td>${emp.empId}</td>
                        <td>${emp.empName}</td>
                        <td>${emp.sex}</td>
                        <td>${emp.phone}</td>
                        <td>${emp.email}</td>
                        <td>${emp.address}</td>
                        <td>${emp.education}</td>
                        <td>
                            <fmt:formatDate value="${emp.birthday}" type="date" pattern="yyyy-MM-dd"/>
                        </td>
                        <td>${emp.empDept.deptName}</td>
                        <td>${emp.empPos.posName}</td>
                        <%--传参如果是字符串类型必须要加单引号--%>
                        <td>
                            <button type="button" class="btn btn-primary" onclick="updateEmp(${emp.empId},'${emp.empName}','${emp.sex}','${emp.phone}','${emp.email}','${emp.address}','${emp.education}','${emp.birthday}','${emp.empDept.deptName}','${emp.empPos.posName}') ">修改
                            </button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger" onclick="deleteEmp(${emp.empId}) ">删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">修改员工</h4>
                </div>

                <div class="modal-body">
                    <%--模态框主体内容--%>
                    <form class="form-horizontal" id="updateForm">

                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="empName"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="empsex"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="empphone"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="empemail"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="empaddress"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="education"/>
                            </div>
                            <div class="col-sm-12">
                                <input type="date" name="birthday" class="form-control inputText" id="birthday" placeholder="出生日期" >
                            </div>
                            <div class="col-sm-12">
                                <select id="deptSelect" name="deptSelect" class="form-control inputText">
                                    <option value='0'>----部门---</option>
                                </select>
                            </div>
                            <div class="col-sm-12">
                                <select id="posSelect" name="posSelect" class="form-control inputText">
                                    <option value='0'>----职位---</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default update" data-dismiss="modal">关闭</button>
                            <button id="postSubmit" type="button" class="btn btn-primary update">提交更改</button>
                        </div>
                    </form>
                    <%--模态框主体内容--%>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


    </div>
</div>
<script>
    $(function(){
        ajaxLoadDept();
        ajaxLoadPos();

    });
        // UE.getEditor('postContent');
        function ajaxLoadPos(){

            $.ajax({
                url: '${pageContext.request.contextPath}/pos/ajaxList',
                dataType: "json",
                type: "post",
                success: function (msg) {
                    // 处理正确的返回数据
                    if (msg.code == 1) {
                        $.each(msg.data, function(index, deptObj){
                            // alert(deptObj['deptId']);
                            // alert(deptObj['deptName']);
                            $("#posSelect").append("<option value="+ deptObj['posId']+ ">"+ deptObj['posName']+ "</option>");
                        });
                    }

                }, error: function () {
                    alert("数据传输错误！");
                }
            })
        }
        function ajaxLoadDept(){

            $.ajax({
                url: '${pageContext.request.contextPath}/dept/ajaxList',
                dataType: "json",
                type: "post",
                success: function (msg) {
                    // 处理正确的返回数据
                    if (msg.code == 1) {
                        $.each(msg.data, function(index, deptObj){
                            // alert(deptObj['deptId']);
                            // alert(deptObj['deptName']);
                            $("#deptSelect").append("<option value="+ deptObj['deptId']+ ">"+ deptObj['deptName']+ "</option>");
                        });
                    }

                }, error: function () {
                    alert("数据传输错误！");
                }
            })
        }
        function updateEmp(empId,empName,sex,phone,email,address,education,birthday,deptId,posId) {

            // 1.显示模态对话框
            $('#myModal').modal("show");

            // 2.给对话框里赋值
            $('#empName').attr("value", empName);
            $('#empsex').attr("value", sex);
            $('#empphone').attr("value", phone);
            $('#empemail').attr("value", email);
            $('#empaddress').attr("value", address);
            $('#education').attr("value", education);
            function addZero(v){if(v<10)return '0'+v;return v.toString()}
            var d = new Date(birthday);
            var s = d.getFullYear().toString()+"-" + addZero(d.getMonth() + 1)+"-" + addZero(d.getDate());
            $('#birthday').val(s);
            // 3.点击提交更改发起ajax请求
            $('#postSubmit').click(function (){
                empName = $('#empName').val();
                sex = $('#empsex').val();
                phone = $('#empphone').val();
                email = $('#empemail').val();
                address = $('#empaddress').val();
                education = $('#education').val();
                birthday = $('#birthday').val();
                deptId = $('#deptSelect').val();
                posId = $('#posSelect').val();
                sendUpdateAjax(empId,empName,sex,phone,email,address,education,birthday,deptId,posId);
                // 发动ajax请求后 隐藏模态对话框
                $('#myModal').modal("hide");


            })


        }
        function sendUpdateAjax(empId,empName,sex,phone,email,address,education,birthday,deptId,posId) {

            url = '${pageContext.request.contextPath}/emp/update';
            data = {
                "empId": empId,
                "empName": empName,
                "sex": sex,
                "phone": phone,
                "email": email,
                "address": address,
                "education": education,
                "birthday": birthday,
                "depId": deptId,
                "posId": posId,
            };

            $.ajax({
                url: url,
                data: data,
                dataType: "json",
                type: "post",
                success: function (msg) {

                    // 处理正确的返回数据
                    if (msg.code == 1) {
                        window.location.href='${pageContext.request.contextPath}/emp/list';
                        //parent.location.reload();
                    }


                }, error: function () {
                    alert("数据传输错误！");
                }
            })
        }

       function deleteEmp(empId) {

            url = '${pageContext.request.contextPath}/emp/delete';
            data = {
                "empId": empId
            };

            $.ajax({
               url: url,
               data: data,
               dataType: "json",
               type: "post",
               success: function (msg) {

                   // 处理正确的返回数据
                   if (msg.code == 1) {
                       window.location.href='${pageContext.request.contextPath}/emp/list';
                       //parent.location.reload();
                   }

               }, error: function () {
                   alert("数据传输错误！");
               }
           })

        }



</script>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <%--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>--%>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
